import React, { Component } from 'react'
import { Row, Col, Table, Input, Button, message } from 'antd'
import './style.css'

const ajax = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(Math.random() > 0.3)
    }, 1000)
  })
}
export default class componentName extends Component {
  constructor(props) {
    super(props)
    this.state = {
      list: [],
      loading: true,
    }
  }
  componentDidMount() {
    setTimeout(() => {
      this.setState({
        loading: false,
        list: [
          {
            key: '1',
            name: '胡彦斌',
            age: 32,
            address: '西湖区湖底公园1号',
          },
          {
            key: '2',
            name: '胡彦祖',
            age: 42,
            address: '西湖区湖底公园1号',
          },
        ],
      })
    }, 1000)
  }
  columns = () => {
    return [
      {
        title: '姓名',
        dataIndex: 'name',
        key: 'name',
      },
      {
        title: '年龄',
        dataIndex: 'age',
        key: 'age',
      },
      {
        title: '住址',
        dataIndex: 'address',
        key: 'address',
      },
      {
        title: '操作',
        render: (v, r, i) => {
          return <a onClick={() => this.deleteTableItemByIndex(i)}>删除</a>
        },
      },
    ]
  }
  deleteTableItemByIndex = (idx) => {
    const { list } = this.state
    if (list.length) {
      list.splice(idx, 1)
      this.setState({ list: [].concat(list) })
    }
  }
  asyncAddTableItem = async () => {
    this.setState({ loading: true })
    const result = await ajax()
    this.setState({ loading: false })
    if (result) {
      message.success('添加成功')

      this.state.list.push({
        key: Math.random(),
        name: 'yinyin',
        age: 18,
        address: `西湖区湖底公园${this.state.list.length}号`,
      })
      this.setState({ list: [].concat(this.state.list) })
    } else {
      message.error('添加失败')
    }
  }

  render() {
    return (
      <div>
        <Row style={{ margin: '20px' }} className="topFrom">
          <Col span="8">
            <span style={{ lineHeight: '32px', marginRight: '10px' }}>
              ID名
            </span>
            <Input style={{ width: '200px' }} placeholder="请输入ID名" />
          </Col>
          <Col span="8">
            <span style={{ lineHeight: '32px', marginRight: '10px' }}>
              ID名
            </span>
            <Input style={{ width: '200px' }} placeholder="请输入ID名" />
          </Col>
          <Col span="8">
            <span style={{ lineHeight: '32px', marginRight: '10px' }}>
              ID名
            </span>
            <Input style={{ width: '200px' }} placeholder="请输入ID名" />
          </Col>
          <Col span="8">
            <span style={{ lineHeight: '32px', marginRight: '10px' }}>
              ID名
            </span>
            <Input style={{ width: '200px' }} placeholder="请输入ID名" />
          </Col>
          <Col span="8">
            <span style={{ lineHeight: '32px', marginRight: '10px' }}>
              ID名
            </span>
            <Input style={{ width: '200px' }} placeholder="请输入ID名" />
          </Col>
          <Col span="8">
            <Button
              type="primary"
              ghost
              onClick={() => {
                message.error('功能还未实现')
              }}
            >
              搜索
            </Button>
            &nbsp; &nbsp;
            <Button
              onClick={() => {
                this.state.list.length = 2
                this.setState({ list: [].concat(this.state.list) })
              }}
            >
              重置
            </Button>
            &nbsp; &nbsp;
            <Button
              type="primary"
              onClick={() => {
                this.state.list.push({
                  key: Math.random(),
                  name: 'yinyin',
                  age: 18,
                  address: `西湖区湖底公园${this.state.list.length}号`,
                })
                this.setState({ list: [].concat(this.state.list) })
              }}
            >
              添加
            </Button>
          </Col>
          <Col soan="8">
            <Button type="primary" onClick={this.asyncAddTableItem}>
              添加(异步提交后显示在列表)
            </Button>
          </Col>
        </Row>
        <Table
          loading={this.state.loading}
          dataSource={this.state.list}
          columns={this.columns()}
        ></Table>
      </div>
    )
  }
}
